<template>
    <div class="page">
        <img src="https://pro.naiveadmin.com/assets/login-bg.be83cd61.svg" alt="" srcset="">
        <el-form class="login-form" label-width="80px" ref="form" :model="model" :rules="rules">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="model.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="model.password" />
            </el-form-item>
            <el-form-item class="captcha" label="验证码" prop="verifyCode">
                <el-input class="captcha_input" v-model="model.verifyCode" @keyup.enter="handleLogin" />
                <Captcha ref="captcha" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="loading" @click="handleLogin">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import Captcha from "./components/captcha.vue";
import { ElMessage } from "element-plus"
export default {
    name: 'login',

    components: {
        Captcha,
    },

    data() {
        return {
            // 节流阀
            loading: false,
            model: {
                // 用户名
                username: 'admin',
                // 密码
                password: '123456',
                //验证码
                verifyCode: ''
            },
            rules: {
                username: [{ required: true, message: '请输入用户名' }],
                password: [
                    { required: true, message: '请输入密码' },
                    { min: 6, max: 12, message: '最少输入6位' }
                ],
                verifyCode: [{ required: true, message: '请输入验证码' }]
            }
        }
    },
    methods: {
        async handleLogin() {
            // 利用组件的表单校验方法
            await this.$refs.form.validate();
            // console.log(this.$refs.captcha)
            // 此处说明校验成功
            // 组装登录接口所需的参数，供后续校验
            const params = {
                ...this.model,
                captchaId: this.$refs.captcha.captchaId
            }
            try {
                this.loading = true;
                // console.log(this.loading);
                // 调用登录接口派发user/login登陆动作
                const data = await this.$store.dispatch("user/login", params);
                console.log(data);
                // 调用获取信息接口派发user/getPerson动作
                // 移入到全局前置守卫中
                // await this.$store.dispatch("user/getPerson");
                // 登陆成功
                ElMessage({
                    type: "success",
                    message: "登陆成功",
                    duration: 1000,
                    onClose: () => {
                        const redirect = this.$route.query.redirect || "/";
                        this.loading = false;
                        this.$router.replace(redirect)
                    },
                });
                // 登陆错误处理
            } catch (error) {
                // 清空输入框和刷新验证码
                this.loading = false;
                this.model.verifyCode = "";
                this.$refs.captcha.refresh()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: skyblue;

    .login-form {
        padding: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        height: 300px;
        border-radius: 5px;
        // box-shadow: 0 0 10px pink;
        background-color: #fff;

        ::v-deep(.el-form-item) {
            color: --el-text-color-regular
        }

        .el-input {
            width: 200px
        }
    }
}

.captcha {
    ::v-deep(.el-form-item__content) {
        justify-content: space-between;
    }

    .captcha_input {
        width: 70px;
        margin-right: 15px
    }
}

.el-button {
    margin-left: -55px;
}
</style>